<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import ScrollCom from './ScrollCom.vue'
import Mock from 'mockjs';

// const data = reactive({
//   num: 18,
//   userName: "tina"
// });
// const { num } = toRefs(data);
// const count =ref(0);

interface IntData {
  list: {
    city: string;
    id: number
  }[],
  page: number,
  isScroll: boolean
}
const data = reactive<IntData>({
  list: [],
  page: 1,
  isScroll: true
});
const listBox = ref(null);

//确保用户能够第一时间看到第一屏的数据
onMounted(() => {
  getList();
});
const getList = () => {
  data.list.push(
    ...[...new Array(30).keys()].map((v) => ({
      city: Mock.mock("@city(true)"),
      id: 1 + v
    }))
  );
  if (data.list.length > 100) {
    data.isScroll = false;
  }
};
const refreshFun = (fun:any) => {
  data.list = [];
  getList();
  fun();
  data.isScroll = true;
};
</script>

<template>
  <ScrollCom @getList="getList" @refreshFun="refreshFun" :isScroll="data.isScroll">
    <div ref="listBox" class="list-box">
      <div v-for="(i, index) in data.list" :key="index">
        {{ i.city }}
      </div>
    </div>
  </ScrollCom>
</template>

<style scoped>
.list-box {
  background-color: #efefef;
  overflow: auto;

}

.list-box>div {
  line-height: 30px;
}
</style>
